<template>
  <div class="min-h-screen bg-[#f5f7fa] p-6">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h2 class="text-2xl font-light text-[#303133]">练习中心</h2>
      <p class="mt-1 text-sm text-[#909399]">
        在这里你可以参加各种考试和测验的练习
      </p>
    </div>

    <!-- 筛选区域 -->
    <div class="mb-6">
      <el-input
        v-model="searchKey"
        placeholder="搜索考试名称"
        class="w-full max-w-xl"
        clearable
        @clear="handleSearch"
        @keyup.enter="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleSearch"> 搜索 </el-button>
        </template>
      </el-input>
    </div>

    <!-- 考试列表 -->
    <div
      class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
    >
      <exam-item
        v-for="exam in examList"
        :key="exam.id"
        :exam="exam"
        @click="handleExamClick(exam)"
      />
    </div>

    <!-- 分页 -->
    <div class="mt-6 flex justify-center">
      <div class="flex items-center space-x-4 text-sm">
        <!-- 总数显示 -->
        <span class="text-[#909399]">共 {{ pagination.total }} 条</span>

        <!-- 上一页 -->
        <button
          class="text-[#606266] hover:text-[#409EFF] disabled:cursor-not-allowed disabled:text-[#C0C4CC]"
          :disabled="pagination.currentPage <= 1"
          @click="handleCurrentChange(pagination.currentPage - 1)"
        >
          <
        </button>

        <!-- 页码 -->
        <div class="flex items-center space-x-1">
          <template v-for="page in pagination.pageNumbers" :key="page">
            <button
              v-if="page !== '...'"
              class="px-2 text-[#606266]"
              :class="
                page === pagination.currentPage
                  ? 'text-[#409EFF]'
                  : 'hover:text-[#409EFF]'
              "
              @click="handleCurrentChange(page)"
            >
              {{ page }}
            </button>
            <span v-else class="px-1 text-[#606266]"> ... </span>
          </template>
        </div>

        <!-- 下一页 -->
        <button
          class="text-[#606266] hover:text-[#409EFF] disabled:cursor-not-allowed disabled:text-[#C0C4CC]"
          :disabled="pagination.currentPage >= pagination.totalPages"
          @click="handleCurrentChange(pagination.currentPage + 1)"
        >
          >
        </button>

        <!-- 前往页面输入框 -->
        <div class="flex items-center space-x-2">
          <span class="text-[#606266]">前往</span>
          <input
            v-model.number="pagination.jumpPage"
            type="number"
            class="w-12 border-b border-[#DCDFE6] px-1 text-center text-[#606266] outline-none focus:border-[#409EFF]"
            min="1"
            :max="pagination.totalPages"
            @keyup.enter="handleJumpPage"
          />
          <span class="text-[#606266]">页</span>
        </div>
      </div>
    </div>

    <!-- 无数据显示 -->
    <el-empty v-if="examList.length === 0" description="暂无考试数据" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import ExamItem from './examItem.vue'
import { exercisePaging } from '@/api/user/exampractice'
// 导入默认图片
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

// 搜索和筛选
const searchKey = ref('')
const filters = reactive({
  subject: '',
  type: '',
  status: '',
})

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 12,
  total: 10,
  pageNumbers: [1, 2, 3, 4, 5],
  totalPages: 1,
  jumpPage: 1,
})

// 模拟考试数据
const examList = ref([
  {
    exerciseCount: 0,
    id: 63,
    repoTitle: 'TYG',
    totalCount: 32,
  },
])

// 处理搜索
const handleSearch = () => {
  pagination.currentPage = 1
  fetchExamList()
}

// 重置筛选条件
const resetFilters = () => {
  searchKey.value = ''
  filters.subject = ''
  filters.type = ''
  filters.status = ''
  handleSearch()
}

// 处理分页变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  fetchExamList()
}

// 处理当前页变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  fetchExamList()
}

// 处理考试点击
const handleExamClick = (exam) => {
  router.push({
    path: '/practice',
    query: {
      repoId: exam.id, // 题库id
      repoTitle: exam.repoTitle, // 题库名称
    },
  })
}

// 获取考试列表
const fetchExamList = async () => {
  try {
    const { data } = await exercisePaging()

    examList.value = data.records
    pagination.total = data.total
  } catch (error) {
    ElMessage.error('获取考试列表失败')
  }
}

// 监听筛选条件变化
watch(
  [filters],
  () => {
    pagination.currentPage = 1
    fetchExamList()
  },
  { deep: true }
)

onMounted(() => {
  fetchExamList()
})
</script>

<style lang="less" scoped>
.el-pagination {
  --el-pagination-hover-color: var(--el-color-primary);
}
</style>
